/* The mode for each of the categories. The mode will be 1 if the category has been opened */
var irrigationmode = 0;
var lakesmode = 0;
var othermode = 0;

/* Each of the categories */
var irrigation;
var lakes;
var other;

var arrow1;
var arrow2;
var arrow3;

/* Starting size */
var startMinHeight;

window.onload = function () {
    irrigation = document.getElementById("irrigation");
    lakes = document.getElementById("lakes");
    other = document.getElementById("other");
    arrow1 = document.getElementById("arrow1");
    arrow2 = document.getElementById("arrow2");
    arrow3 = document.getElementById("arrow3");
    startMinHeight = 800;

    irrigation.children[1].style.height = "0";
    lakes.children[1].style.height = "0";
    other.children[1].style.height = "0";
    arrow1.style.opacity = "0";
    arrow2.style.opacity = "0";
    arrow3.style.opacity = "0";
    document.getElementById("header").style.minHeight = startMinHeight + "px";

    /* Add click listeners that will trigger the accordion effect */
    irrigation.addEventListener("click", function() {irrigationmode = accordion(irrigation, irrigationmode, irrigation.children[1].children.length);});
    lakes.addEventListener("click", function() {lakesmode = accordion(lakes, lakesmode, lakes.children[1].children.length);});
    other.addEventListener("click", function() {othermode = accordion(other, othermode, other.children[1].children.length);});
    irrigation.addEventListener("mouseover", function(){setImg(arrow1, 1);});
    irrigation.addEventListener("mouseout", function(){setImg(arrow1, 0);});
    lakes.addEventListener("mouseover", function(){setImg(arrow2, 1);});
    lakes.addEventListener("mouseout", function(){setImg(arrow2, 0);});
    other.addEventListener("mouseover", function(){setImg(arrow3, 1);});
    other.addEventListener("mouseout", function(){setImg(arrow3, 0);});
}


function accordion(category, mode, subnum) {
    document.getElementById("header").style.minHeight = startMinHeight + "px";
    if (mode) {
	/* Close the accordion */
	category.children[1].style.height = "0"
	return 0;
    } else {
	/* Open the accordion */
	/* Close all categories first */
	if (irrigationmode == 1) {
	    irrigation.children[1].style.height = "0"
	    irrigationmode = 0;
	}
	
	if (lakesmode == 1) {
	    lakes.children[1].style.height = "0"
	    lakesmode = 0;
	}
	
	if (othermode == 1) {
	    other.children[1].style.height = "0";
	    othermode = 0;
	}

	arrow1.style.opacity = "0";
	arrow2.style.opacity = "0";
	arrow3.style.opacity = "0";
	arrow1.style.display = "none";
	arrow2.style.display = "none";
	arrow3.style.display = "none";
	
	/* Open the category that was origionally clicked */
	category.children[1].style.height = (subnum*1.325 + 0.2) + "em";
	document.getElementById("header").style.minHeight = (subnum*45 + startMinHeight) + "px";
	console.log("Height: " + window.getComputedStyle(document.getElementById("header"), null).minHeight);
	arrow1.style.display = "inline";
	arrow2.style.display = "inline";
	arrow3.style.display = "inline";
	return 1;
    }
}


function setImg(myimage, visible) {
    if (visible) {
	console.log("Visible");
	myimage.style.opacity = 1;
	console.log("Height: " + myimage.style.height);
    } else {
	console.log("invisible");
	myimage.style.opacity = "0";
    }
    return;
}
